import { View, Text, ScrollView } from "@tarojs/components";
import "./plan.less";
import { useState } from "react";
import { TPlan } from "@/types";
import { useDidShow } from "@tarojs/taro";
import { getPlans, delPlan } from "@/request";

import { PlayIcon, PlusIcon, SettingIcon } from "@/components/Icons";
import Taro from "@tarojs/taro";
import Empty from "@/components/Empty";
import SwipeableCard from "@/components/SwipeableCard";
import ImageCard from "@/components/ImageCard";
import { PopupProvider } from "@/store/popup";
import Tag from "@/components/Tag";

export default function Plan() {
  const [plans, setPlans] = useState<TPlan[]>([]);

  useDidShow(() => {
    handleInit();
  });

  const handleInit = async () => {
    const res = await getPlans();
    setPlans(res);
  };

  const handleAddPlan = () => {
    Taro.navigateTo({
      url: `/pages/planadd/planadd?mode=add`,
    });
  };

  const handleEdit = (item: TPlan) => {
    Taro.navigateTo({
      url: `/pages/planadd/planadd?id=${item._id}&mode=edit`,
    });
  };

  const handlePlay = (item: TPlan) => {
    Taro.navigateTo({
      url: `/pages/startplan/index?id=${item._id}`,
    });
  };

  const handleDelPlan = (id: string) => {
    Taro.showModal({
      content: "确定要删除吗？",
      success: async (res) => {
        if (res.confirm) {
          await delPlan(id);
          handleInit();
        }
      },
    });
  };

  return (
    <PopupProvider>
      <View className="plan">
        <View className="page-header">
          <Text>训练计划</Text>
          <PlusIcon type="primary" size={1.4} onClick={handleAddPlan} />
        </View>
        {plans.length === 0 ? (
          <Empty text="你还没有制定过计划，快去添加吧！" type="white" />
        ) : (
          <ScrollView scrollY className="plan-scroll">
            <View className="inner-container">
              {plans.map((item) => (
                <SwipeableCard
                  key={item._id}
                  childCls="plan-item"
                  onDelete={() => handleDelPlan(item._id)}
                  onEdit={() => handleEdit(item)}
                  onClick={() => handlePlay(item)}
                  style={{ marginBottom: Taro.pxTransform(30) }}
                >
                  <View className="plan-header">
                    <Text className="title">{item.name}</Text>
                    <View className="sub">{item.motions.length} 个动作</View>
                  </View>
                  <View className="plan-content">
                    {item.motions.slice(0,4).map((motion, index) => (
                      <ImageCard
                        img={motion.img}
                        title={motion.name}
                        size={Taro.pxTransform(120)}
                        showTitle={false}
                        detailAction={motion.motionId}
                        // otherInfo={
                        //   <Text style={{ fontSize: Taro.pxTransform(24) }}>
                        //     {motion.recordWay === 1
                        //       ? "计时"
                        //       : `${motion.sets.length}组`}
                        //   </Text>
                        // }
                      />
                    ))}
                  </View>
                </SwipeableCard>
              ))}
            </View>
          </ScrollView>
        )}
      </View>
    </PopupProvider>
  );
}
